<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="js/fun.js" type="text/javascript"></script>
        <script src="js/config.js" type="text/javascript"></script>
        <script src="js/device.js" type="text/javascript"></script>
        <script src="js/physical_connect.js" type="text/javascript"></script>
        <script src="data/physicalconnect.js" type="text/javascript"></script>
    </head>
    <style type="text/css">
        body{background: #517470}
        canvas{background: #517470}
        .overlayer{position: fixed;width: 100%;height: 100%;z-index: 999;background: rgba(0, 0, 0, 0.47);top:0;left:0;text-align: center;}
        .window{position: relative;margin: 0 auto;width: 80%;background: #fff;top: 100px;text-align: center;padding:10px;max-height: 80%;overflow: scroll;}
        .list .path-item.active{background: green;}
        .list .path-item span{width:30%;display: inline-block;line-height: 200%;cursor: pointer;}
        .list .path-item span.start-device{text-align: left;}
        .list .path-item span.end-device{text-align: right;}
        .list .path-item span.arrow{background: url(imgs/arrow.png) center no-repeat;height: 1em;}
    </style>
    <script type="text/javascript">
        var can = null;//画布DOM
        var canvas = null;//保存画布
        var unit_id = 4;//装置ID
        var port_id = 40;//端口ID
        var dataStep1 = loopLinkData;//第一步数据
        var cableColor = '#000000';
        var fibreColor = '#0000ff';
        //第二步数据，异步获取某个路径的连接信息,
        var getLinkInfoAsyncFun = function(PATH_ID, callback){
            //获取数据后调用回掉函数,获取数据的结构应为data/physicalconnect.js中的linkInfoData相同
            callback(linkInfoData);
        };
        //获取光缆名称
        var getCableNameAsyncFun = function(CUBICLE_ID1, CUBICLE_ID2, callback){
            callback(CUBICLE_ID1 + "-" + CUBICLE_ID2);
        };
        //获取纤芯名称
        var getFibreNameAsyncFun = function(PORT_ID1, PORT_ID2, callback){
            callback(PORT_ID1 + "-" + PORT_ID2);
        };
        var chart = null;//绘图对象
        function pageLoad(){
            can = $$('canvas');
            canvas = can.getContext('2d');
            can.width = window.innerWidth - 60;
            can.height = window.innerHeight - 60;
            //传入canvas对象，与事件坐标参数
            var windowToCanvas = function(canvas, x, y){
                var bbox;
                bbox = canvas.getBoundingClientRect();
                return {
                    x: (x - bbox.left) * (canvas.width / bbox.width),
                    y: (y - bbox.top) * (canvas.height / bbox.height)
                };
            };
            //点击对象的回调
            $$('canvas').onclick = function(){
                var point = windowToCanvas(this, event.clientX, event.clientY);
                var port = chart.getPortByPoint(point.x, point.y);
                if(port != null){
                    var msg ="";  
                    for(var name in port){
                        if(name == 'data'){
                            var dataMsg = "";
                            for(var k in port[name]){
                                dataMsg += k+":"+port[name][k]+',';
                            }
                            msg += name+": {"+ dataMsg+"}\n "; 
                        }else{
                            msg += name+": "+ port[name]+"\n "; 
                        } 
                    } 
                    alert(msg);
                    console.log(port);
                }
            };
            //解析数据，显示窗口
            var pathDic = {};
            for(var k in dataStep1.list){
                var v = dataStep1.list[k];
                if(!pathDic.hasOwnProperty(v.PATH_ID)){
                    pathDic[v.PATH_ID] = [];
                }
                pathDic[v.PATH_ID].push(v);
            }
            var itemHtml = '';
            for(var k in pathDic){
                pathDic[k].sort(function(a,b){
                    return a.PORT_INDEX - b.PORT_INDEX;
                });
                itemHtml += '<div class="path-item" data-pathid="'+pathDic[k][0].PATH_ID+'"><span class="start-device">'+pathDic[k][0].UNIT_DESC+'</span><span class="arrow"></span><span class="end-device">'+pathDic[k][pathDic[k].length - 1].UNIT_DESC+'</span></div>';
            }
            $$('list').innerHTML += itemHtml;
            //查找所有可选项
            var pathDoms = document.getElementsByClassName("path-item");
            for(var i = 0; i < pathDoms.length; i++){
                var d = pathDoms[i];
                d.onclick = function(){
                    for(var j = 0; j < pathDoms.length; j++){
                        removeClass(pathDoms[j], 'active');
                    }
                    addClass(this, 'active');
                };
            }
            if(pathDoms.length == 1){
                var path_id = pathDoms[0].dataset['pathid'];
                drawPath(path_id);
            }else if(pathDoms.length < 1){
                alert('缺少必要数据！');
            }
        }
        function drawPath(path_id){
            $$("overlayer").style.display='none';
            getLinkInfoAsyncFun(path_id, function(linkInfoData){
                //开始画此条线路
                //解析数据，画图
                chart = PhysicalConnectChart.parseFrom(linkInfoData);
                if(can.width < chart.getTotalWidth()){
                    can.width = chart.getTotalWidth() + 50;
                }
                if(can.height < chart.getTotalHeight()){
                    can.height = chart.getTotalHeight() + 50;
                }
                chart.x = (can.width - chart.getTotalWidth()) / 2;
                chart.y = (can.height - chart.getTotalHeight()) / 2;
                chart.draw(canvas);
            });
        }
        function ok(){
            var path_id = null;
            var pathDoms = document.getElementsByClassName("path-item");
            for(var j = 0; j < pathDoms.length; j++){
                if(hasClass(pathDoms[j], 'active')){
                    path_id = pathDoms[j].dataset['pathid'];
                    break;
                }
            }
            if(path_id == null){
                alert("请选择先显示的回路！");
                return;
            }
            drawPath(path_id);
        }
        function cancel(){
            var pathDoms = document.getElementsByClassName("path-item");
            for(var j = 0; j < pathDoms.length; j++){
                removeClass(pathDoms[j], 'active');
            }
        }
        function $$(id){
            return document.getElementById(id);
        }
    </script>
    <body onload="pageLoad();">
        <canvas id="canvas" width="400px" height="300px">4</canvas>
        <div class="overlayer" id="overlayer">
            <div class="window">
                <div class="title">请选择要显示的"实回路"</div>
                <div class="list" id="list">
                    
                </div>
                <div class="btns">
                    <button onclick="cancel();">取消</button>
                    <button onclick="ok();">确定</button>
                </dv>
            </div>  
        </div>      
    </body>
    <script type="text/javascript">
        function hasClass(obj, cls) {  
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
        }  
        
        function addClass(obj, cls) {  
            if (!this.hasClass(obj, cls)) obj.className += " " + cls;  
        }  
        
        function removeClass(obj, cls) {  
            if (hasClass(obj, cls)) {  
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
                obj.className = obj.className.replace(reg, ' ');  
            }  
        }
        function toggleClass(obj,cls){  
            if(hasClass(obj,cls)){  
                removeClass(obj, cls);  
            }else{  
                addClass(obj, cls);  
            }  
        }  
    </script>
</html>